<template>
    <div>
        <ConditionCard
            shadow="never"
            body-style="padding: 24px 24px 6px 24px;"
            @search="onSubmit('queryForm')"
            @reset="reset('queryForm')"
        >
            <el-form ref="queryForm" :model="queryForm" label-position="left" label-width="80px">
                <el-row :gutter="24" style="height: 50px;">
                    <el-col :span="8">
                        <el-form-item label="年级:" prop="grade"
                        >
                            <el-date-picker
                                v-model="queryForm.grade"
                                value-format="yyyy"
                                type="year"
                                placeholder="选择学年"
                                style="width: 100%"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="培养层次:" prop="trainingLevel">
                            <el-select v-model="queryForm.trainingLevel" style="width: 100%">
                                <el-option
                                    v-for="item in options.trainingLevel"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" v-if="projId == '1'">
                        <el-form-item label="类别:" prop="professionCateGory">
                            <el-select v-model="queryForm.professionCateGory" style="width: 100%;">
                                <el-option
                                    v-for="item in options.professionCateGory"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" v-if="projId != '1'">
                        <el-form-item :label="$t('dic.degreeType') + ':'" prop="degreeType">
                            <el-select
                                v-model="queryForm.degreeType"
                                style="width: 100%" clearable
                                @change="queryCampusMajor"
                            >
                                <el-option
                                    v-for="item in options.degreeType"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="学院:" prop="faculty">
                            <el-select
                                v-model="queryForm.faculty"
                                filterable
                                style="width: 100%"
                                @change="queryCampusMajor"
                                :disabled="departmentId !=''" 
                            >
                                <el-option
                                    v-for="item in options.faculty"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <template v-if="projId == '1'">
                        <el-col :span="8">
                            <el-form-item label="校内专业:" prop="campusProfession">
                                <el-select
                                    v-model="queryForm.campusProfession"
                                    filterable
                                    style="width: 100%"
                                >
                                    <el-option
                                        v-for="item in options.campusProfessions"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </template>
                    <template v-else>
                        <el-col :span="8">
                            <el-form-item filterable label="专业:" prop="major">
                                <el-select v-model="queryForm.major" style="width: 100%">
                                    <el-option
                                        v-for="item in options.major"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="学习形式:" prop="formLearning">
                                <el-select v-model="queryForm.formLearning" style="width: 100%">
                                    <el-option
                                        v-for="item in options.formLearning"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="培养类别:" prop="trainingCategory">
                                <el-select v-model="queryForm.trainingCategory" style="width: 100%"
                                clearable multiple collapse-tags>
                                    <el-option
                                        v-for="item in options.trainingCategory"
                                        :key="item.code"
                                        :label="item.name"
                                        :value="item.code"
                                    />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </template>
                </el-row>
            </el-form>
        </ConditionCard>
        <el-card v-loading="loading" shadow="never" body-style="padding: 10px;">
            <div class="condition-title">培养方案</div>
            <div class="edu-opertion-bar">
                <div class="float-left">
                    <el-input
                        v-model="queryForm.name"
                        placeholder="培养方案名称"
						@keydown.enter.native="onSubmit('queryForm')"
                    >
					<i slot="prefix" @click="onSubmit('queryForm')" class="el-input__icon el-icon-search"></i>
					</el-input>
                </div>
                <div class="float-right"/>
            </div>
            <!-- <el-table 
                :data="tableData"  
                fit 
                stripe 
                style="width: 100%" 
                :cell-class-name="cellStyleMethod"
                tooltip-effect="light"  
            >
                <el-table-column align="center" label width="30">
                    <template slot-scope="scope">
                        <el-radio
                            v-model="selectRadio"
                            :label="scope.row.id"
                            @change="getSchemeId(scope.row.id)"
                        >&nbsp;</el-radio>
                    </template>
                </el-table-column>
                <el-table-column label="方案名称" prop="name" width="150" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <span>{{ scope.row.name }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="年级" prop="grade" width="70"/>
                <el-table-column label="培养层次" prop="trainingLevelI18n" width="80"/>
                <el-table-column label="学院" prop="facultyI18n"/>
                <template v-if="projId == '1'">
                    <el-table-column label="类别" width="90">
                        <template
                            slot-scope="scope"
                        >{{ scope.row.professionCateGory == "1" ? "专业大类" : "专业" }}</template>
                    </el-table-column>
                    <el-table-column label="校内专业" prop="campusProfessionName" width="100"/>
                </template>
                <template else>
                    <el-table-column label="专业" prop="majorI18n"/>
                    <el-table-column label="学习形式" prop="formLearningI18n" width="80"/>
                    <el-table-column label="培养类别" prop="trainingCategoryI18n" width="80"/>
                    <el-table-column :label="$t('dic.degreeType')" prop="degreeTypeI18n" width="100"/>
                </template> -->
                <!-- <el-table-column align="center" label width="30">
          <template slot-scope="scope">
            <el-radio
              v-model="selectRadio"
              :label="scope.row.id"
              @change="getSchemeId(scope.row.id)"
            >&nbsp;</el-radio>
          </template>
        </el-table-column>
        <el-table-column label="方案名称" prop="name" width="160">
          <template slot-scope="scope">
            <span :title="scope.row.name">{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="年级" prop="grade"/>
        <el-table-column label="培养层次" prop="trainingLevel"/>
        <el-table-column label="学院" prop="faculty"/>
        <el-table-column label="专业" prop="major"/>
        <el-table-column label="学位类型" prop="degreeType"/>
                <el-table-column label="专项计划" prop="spcialPlan"/>-->
            <!-- </el-table> -->
            <el-table 
                :data="tableData"  
                fit 
                stripe 
                style="width: 100%" 
                :cell-class-name="cellStyleMethod"
                tooltip-effect="light"  
            >
                <el-table-column align="center" label width="30">
                    <template slot-scope="scope">
                        <el-radio
                            v-model="selectRadio"
                            :label="scope.row.id"
                            @change="getSchemeId(scope.row.id)"
                        >&nbsp;</el-radio>
                    </template>
                </el-table-column>
                <el-table-column label="方案名称" prop="name" width="200" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <span>{{ scope.row.name }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="年级" prop="grade" width="70"/>
                <el-table-column label="培养层次" prop="trainingLevelI18n" width="80"/>
                <el-table-column label="学院" prop="facultyI18n" show-overflow-tooltip/>
                <template v-if="projId == '1'">
                    <el-table-column label="类别" width="90">
                        <template
                            slot-scope="scope"
                        >{{ scope.row.professionCateGory == "1" ? "专业大类" : "专业" }}</template>
                    </el-table-column>
                    <el-table-column label="校内专业" prop="campusProfessionName" width="100" show-overflow-tooltip/>
                </template>
                <template else>
                    <el-table-column label="专业" prop="majorI18n" show-overflow-tooltip/>
                    <el-table-column label="学习形式" prop="formLearningI18n" width="80"/>
                    <el-table-column label="培养类别" prop="trainingCategoryI18n" width="80" show-overflow-tooltip/>
                    <el-table-column :label="$t('dic.degreeType')" prop="degreeTypeI18n" width="80"/>
                </template>
            </el-table>
            <div class="edu-pagination">
                <div class="float-right">
                    <el-pagination
                        :current-page="queryForm.pageNum_"
                        :page-sizes="[20,50,100,500,1000]"
                        :page-size="queryForm.pageSize_"
                        :total="queryForm.total"
                        layout="total, sizes, prev, pager, next, jumper"
                        style="float: right;margin:0;"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                    />
                </div>
            </div>
        </el-card>
    </div>
</template>

<script>
import * as API from "common/src/api/culture/cultruescheme";
import UTILS from "common/src/utils/utils";
import { queryDic, sortTrainingCategories } from "common/src/api/dictionary";
import { findFaculty } from "common/src/api/faculty";
import { getGraduateDegreePage } from "common/src/api/resource/course";
export default {
    props: {
        currentSelected: {
            default: null
        },
        projId: {
            default: 1
        },
        departmentId:{
            default: null
        },
        forms:{
            default: null
        },
        isShow: { default: false },
        dialogStatus: {
            default: false
        }
    },
    watch: {
        isShow(newVal, oldVal) {
            if (newVal) {
                this.init();
            }
        },
        // forms(newVal, oldVal) {
        //     this.queryForm.faculty = this.forms.departmentId
        //     this.queryForm.grade = this.forms.grade
        //     this.queryForm.trainingLevel = this.forms.trainingLevel
        //     this.queryForm.major = this.forms.major
        //     this.queryForm.degreeType = this.forms.degreeType
        //     this.queryForm.formLearning = this.forms.formLearning
        //     if(this.forms.trainingCategory){
        //         this.queryForm.trainingCategory = this.forms.trainingCategory.split(",")
        //     }
        // },
    },
    name: "SelectCultureScheme",
    data() {
        return {
            loading: false,
            // 筛选相关选项
            queryForm: {
                "x-token": "",
                grade: "", // 年级
                trainingLevel: "", // 培养层次
                faculty: this.departmentId?this.departmentId:"", // 学院
                major: "", // 专业
                degreeType: "", // 学位类型
                formLearning: "", // 学习形式
                spcialPlan: "", // 专项计划
                studentAbroad: "", // 国际学生
                status: 3, // 状态
                name: "", // 名称
                pageNum_: 1,
                pageSize_: 20,
                total: 0,
                trainingCategory: '',
                campusProfession: ""
            },
            // 下拉相关选项数据
            options: {
                grade: [],
                trainingLevel: [],
                faculty: [],
                major: [],
                degreeType: [],
                spcialPlan: [],
                formLearning: [],
                studentAbroad: [],
                campusProfessions: [],
                status: [],
                trainingCategory: [],
                templateName: [],
                professionCateGory: [
                    { value: "1", label: "专业大类" },
                    { value: "2", label: "专业" }
                ]
            },
            tableData: [],
            selectRadio: ""
        };
    },
    methods: {
        cellStyleMethod({row, column, rowIndex, columnIndex}){
            if (columnIndex == 1) {
                return 'normal-cell';
            }
        },
        queryCampusMajor(val) {
			this.queryForm.major = "";
			this.queryForm.campusProfession = "";
            if (this.queryForm.projId == "1") {
                this.queryCampusProfessions(this.queryForm);
            } else {
                if(val) {
                    this.queryMajors();
                }
            }
        },
        queryCampusProfessions(query) {
            this.options.campusProfessions = [];
            this.queryForm.campusProfession = "";
            // 联动校验
            // if(!(query.grade && query.faculty)) {
            //   return
            // }
            query.category = query.professionCateGory;
            API.findProfessionByParam(query).then(res => {
                if (res.code === 200) {
                    this.options.campusProfessions = res.data.map(
                        (item, index) => {
                            return {
                                label: item.professionCateGoryName,
                                value: item.professionCateGory
                            };
                        }
                    );
                }
            });
        },
        init() {
            this.queryForm.grade = this.forms.grade
            this.queryForm.faculty = this.forms.departmentId
            this.queryForm.trainingLevel = this.forms.trainingLevel
            this.queryForm.major = this.forms.major
            this.queryForm.degreeType = this.forms.degreeType
            this.queryForm.formLearning = this.forms.formLearning
            if(this.forms.trainingCategory){
                this.queryForm.trainingCategory = this.forms.trainingCategory.split(",")
            }
            this.initOptions();
            this.handleSearch();
            if(this.departmentId){
                this.queryForm.faculty = this.departmentId;
                this.queryMajors();
            }
            if(this.forms.departmentId){
                this.queryForm.faculty = this.forms.departmentId;
                this.queryMajors();
            }

        },
        reset(form) {
			this.queryForm.name = '';
            this.options.campusProfessions = [];
            if(!this.departmentId){
                this.options["major"] = [];
            }
            this.$refs[form].resetFields();
            this.handleSearch();
        },
        onSubmit(form) {
            this.handleSearch();
        },
        handSearchChang() {
            // 查询时初始化页码和总数
            this.queryForm.pageNum_ = 1;
            this.queryForm.total = 0;
            this.handleSearch();
        },
        handleSearch() {
            const that = this;
            that.loading = true;
            that.queryForm.projId = this.$props.projId;
            API.findCultureSchemeList(that.queryForm)
                .then(
                    function(res) {
                        that.loading = false;
                        if (res && res.data) {
                            res.data.list.forEach(item => {
                                item.selectRadio = 0;
                            });
                            that.tableData = res.data.list;
                            that.queryForm.total = res.data.total_;
                        }
                    },
                    function(err) {
                        that.loading = false;
                        that.$message.error({
                            showClose: true,
                            message: err.toString(),
                            duration: 2000
                        });
                    }
                )
                .catch(function(error) {
                    that.loading = false;
                    console.log(error);
                    that.$message.error({
                        showClose: true,
                        message: "请求出现异常",
                        duration: 2000
                    });
                });
        },
        getSchemeId(id) {
            this.$emit("schemeId", this.selectRadio);
        },
        initOptions() {
            const _this = this;
            findFaculty().then(res => { 
                let data = {"X_YX": res.data};
                UTILS.fillSelect({ faculty: "X_YX" }, data, _this.options);
            });
            //培养类别数据请求并处理
            queryDic({
                lang: _this.$store.getters.language || "cn",
                type: "allChild",
                keys: ["X_PYCC"]
            })
                .then(res => {
                    let list = [];
                    const pycc = res.data["X_PYCC"];
                    for (var key in pycc) {
                        let obj = {};
                        obj.label = pycc[key];
                        obj.value = key;
                        list.push(obj);
                    }
                    if (_this.projId * 1 !== 1) {
                        // 4:研究生,6:博士
                        list = list.filter(e => {
                            return e.value * 1 == 4 || e.value * 1 == 6;
                        });
                    }
                    _this.options.trainingLevel = list;
                })
                .catch(err => {
                    console.log(err);
                });
            const data = {
                lang: _this.$store.getters.language || "cn",
                type: "allChild",
                keys: [
                    "X_YX",
                    "K_XXXS",
                    "X_ZXJH",
                    "X_PYLB",
                    "X_XWLB",
                    "X_XWLX",
                    "X_GLBM"
                ]
            };
            queryDic(data)
                .then(res => {
                    let params = {
                    lang: this.$store.getters.language,
                    keys: ["X_PYLB"]
                };
                sortTrainingCategories(params).then((res) => {
                    this.options.trainingCategory = res.data.X_PYLB;
                });
                    if (res.code == 200) {
                        UTILS.fillSelect(
                            {
                                faculty: "X_YX",
                                degreeType: "X_XWLX",
                                spcialPlan: "X_ZXJH",
                                formLearning: "K_XXXS",
                                degreeCategory: "X_XWLB",
                                // trainingCategory: "X_PYLB",
                                project: "X_GLBM"
                            },
                            res.data,
                            _this.options
                        );
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        changeFaculty(val) {
            this.options["major"] = [];
            this.queryForm.major = "";
            const data = {
                lang: this.$store.getters.language || "cn",
                type: "allChild",
                keys: ["G_ZY"],
                filter: {
                    prefix: [val],
                    specilaCode: "XY2ZY"
                }
            };
            queryDic(data)
                .then(res => {
                    if (res.code == 200)
                        UTILS.fillSelect(
                            { major: "G_ZY" },
                            res.data,
                            this.options
                        );
                })
                .catch(error => {
                    console.log(error);
                });
        },
		queryMajors() {
		    this.options["major"] = [];
		    const data = {
		        college: this.queryForm.faculty,
		        page: false,
                type: this.queryForm.degreeType
		    };
		    getGraduateDegreePage(data).then(res => {
		        if (res.code === 200) {
		            let majors = _.map(res.data.list, item => {
		                return {
		                    value: item.code,
		                    label:
		                        "cn" !== this.$store.getters.language
		                            ? item.nameEn
		                            : item.name
		                };
		            });
		            majors &&
		                0 < majors.length &&
		                (this.options["major"] = [
		                    ...this.options["major"],
		                    ...majors
		                ]);
		        }
		    });
		},
        handleSizeChange(val) {
            this.queryForm.pageSize_ = val;
            this.handleSearch();
        },
        handleCurrentChange(val) {
            this.queryForm.pageNum_ = val;
            this.handleSearch();
        },
        dataInit() {
            //数据初始化
            Object.assign(this.$data, this.$options.data());
        }
    },
    created() {
        this.init();
    }
};
</script>

<style scoped></style>
